﻿import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect,Link} from 'mirrorx';

import { List, InputItem, WhiteSpace, WingBlank, Button } from 'antd-mobile';
import { createForm } from 'rc-form';

import { FormattedMessage} from 'react-intl';
import {API} from '../api'


class App extends React.Component { 
	constructor(props) {
		super(props);
		this.state={
			errorMap:{}
		}

		const Lang = window.LangMessage ||{};

		this.keyCodes = [{
			keycode:"username",
			text:Lang.phone_no || "手机号",
			type:"phone",
			message:Lang.input_correct_phone || "请输入正确的手机号",
			pattern:/[0-9\s]{13}/,
			required:true,  //默认是true
		},{
			keycode:"password",
			text:Lang.log_pwd || "登录密码",
			type:"password",
			required:true,
		},];
	  }

	componentDidMount(){
		
	}

	onErrorClick=(keyCode)=>{
		const {getFieldError } = this.props.form;
		let msg = getFieldError(keyCode);
		if(msg){
			T.showError(msg.join(","));
		}	
	}
	
	submit=()=>{
		this.props.form.validateFields((error, values) => {
			var errorMap ={}
			if(error){
				for(var key in error){
					errorMap[key] = 1;
				}
				
			}else{
				values.username = T.trimAll(values.username);				
				T.fetch2({			
					//url:"/user/login.json",	
					url:API.login.path,
					data:values,
				}).then((res)=>{
					if(res.success){
						if(res.data && res.data.uid){
							T.cookie.set('uid',res.data.uid)
						}
						if(res.data && res.data.channelId){
							T.cookie.set('channelId',res.data.channelId)
						}
						let backurl = T.urlQuery("backurl");
						if(backurl){
							location.href = backurl;
							return;
						}
						location.href = "/product-list-yj-en";					
					}else{
						T.showError("password or username error");
					}
				});	
			}

			this.setState({
				errorMap
			});
			console.log(error, values);

			
		});
	}
	
	render() {
		const { getFieldProps } = this.props.form;
		const Lang = window.LangMessage ||{};
		return (<div className="">
			<WhiteSpace/>
			<List>
			{this.keyCodes.map((item,index)=>
				<InputItem  key={index}
				{...getFieldProps(item.keycode,{
					rules: [{
						required: item.required === undefined ? true:item.required,
						message:item.message || ((Lang.text_input ||"请输入") + item.text),
						pattern:item.pattern
					}]
				})}
				labelNumber={10}			
				type={item.type}
				error ={this.state.errorMap[item.keycode]}
				onErrorClick={this.onErrorClick.bind(this,item.keycode)}
				clear
				placeholder={Lang.text_input ||"请输入"}
				>{item.text}</InputItem>
			
			)}
			
		</List>

		<WhiteSpace/>
		<WhiteSpace/>
		<WingBlank>
			<Button className="diy_background diy_border" type="primary" onClick={this.submit}><FormattedMessage id='login' defaultMessage='登录'/></Button>
			
			{/* <p className="mt30 clearfix f30">
				<Link to="/register" className="diy_color fl"><FormattedMessage id='fast_reg' defaultMessage='快速注册'/></Link>
				<Link to="/password-forget?id=1" className="diy_color  fr"><FormattedMessage id='forget_pwd' defaultMessage='忘记密码'/></Link>
			</p> */}
		</WingBlank>	
	  	</div>)
	}
}

const AppForm = createForm()(App);

export default AppForm;